import React from 'react'
import { Popover } from 'antd';

import './header.scss'
import SVG from '../SVG';
import HeaderSearch from './_search/index';
import { url } from 'inspector';
const headerLogo = require('assets/header/herderLogo.png');
const userImg = require('./images/img03.png');
const checkout = require('./images/checkout.png')
const gold = require('./images/sp.svg')
const recharge = require('./images/recharge.svg')
const record = require('./images/record.svg')
const withdraw = require('./images/withdraw.svg')

interface IUserInfo{
    userImg:string,
    userNmae:string,
    userType:boolean,
    balance:number,
}
const PopBox=(
    <div className='header_pop'>

    </div>
)
const UserInfo:React.FC<IUserInfo>=(props)=>{
    const {userImg,userNmae,userType,balance} = props;
    return (
        <div className='user-info_bg' style={{background:`url(${userImg}) #fff`}}>
            <div className='user-info'>
                <div className='_info_identity'>
                    <div className='_basic'>
                        <div className='_avatar'>
                            <img src={userImg}/>
                        </div>
                        <div className='_data'>
                            <span className='_name'>
                                {
                                    userNmae
                                }
                            </span>
                            <span className='_type'>
                                {
                                    userType?'身份未认证':'身份已认证'
                                }
                            </span>
                        </div>
                    </div>
                    <img src={checkout} alt="" className='_checkout'/>
                </div>
                <div className='_balance'>
                    <img src={gold}  className='gold'/>
                    
                    <span className='_num'>
                        {
                            balance
                        }
                    </span>
                </div>
                <ul className='_user_menu'>
                    <li>
                        <img src={recharge} alt=""/>   
                        <span>
                            充值
                        </span>
                    </li>    
                    <li>
                        <img src={withdraw} alt=""/>    
                        <span>
                            提现
                        </span>
                    </li>       
                    <li>
                        <img src={record} alt=""/>     
                        <span>
                            交易记录
                        </span>
                    </li> 
                </ul>
            </div>
        </div>
    )
}

function Header() {
    return (
        <div className='header'>
            <div className='header-left'>
                <div className='_logo'>
                    <img src={headerLogo} alt="" />
                    <div>
                        <span className='_logo_title'>
                            天赋树
                        </span>
                        <span className='_logo__title'>
                            SKILL TREE
                        </span>
                    </div>
                </div>
                <div className='_menu'>
                    <a className='_menu_library'> 图谱库</a>
                    <a className='_menu_template'> 模版库</a>
                    <a className='_menu_app'>APP</a>
                </div>

            </div>
            <div className='header-right'>
                <div className='_search'>
                    <SVG xlinkHref='icon-sousuo'></SVG>
                    <HeaderSearch />
                </div>
                <div className='_message'>
                    <SVG xlinkHref='icon-xiaoxi'></SVG>
                    <span className='remind'></span>
                </div>
                    <Popover 
                        getPopupContainer={(trigger) => trigger}
                        content={<UserInfo userNmae='悠悠' userImg={userImg} userType={false} balance={10} />} 
                        placement="bottom" 
                        trigger="click"
                    >
                        <div className='head_img_box'>
                            <div className='_userImg'>
                                <img src={userImg} alt="" />
                            </div>
                        </div>
                    </Popover>
                <div className='_btn'>
                    <button className='upgrade-vip'>成为高级用户</button>
                </div>
            </div>
        </div>
    )
}

export default Header
